<template>
	<!-- 列表底部内容 -->
	<div class="footer">
		<div class="todo-count">共<strong>{{ lastLength }}</strong>条未完成任务 </div>
		<el-input placeholder="请输入检索关键字" v-model.trim="keyword" @keyup.enter="updateKeyword"
			style="width: 240px;padding-right: 20px;">

			<template #prefix>
				<el-icon>
					<search />
				</el-icon>
			</template>

		</el-input>
		<el-space>
			<el-button round @click.prevent="updateStatus('all')" :type="status === 'all' ? 'primary':''">全部</el-button>
			<el-button round @click.prevent="updateStatus('not')" :type="status === 'not' ? 'primary':''">待办</el-button>
			<el-button round @click.prevent="updateStatus('finish')" :type="status === 'finish' ? 'primary':''">已完成
			</el-button>
		</el-space>
	</div>
</template>

<script setup>
	import { Search } from '@element-plus/icons-vue'
</script>

<script>
	export default {
		props: {
			lastLength: {
				type: Number,
			},
			status: {
				type: String,
			}
		},
		data() {
			return {
				keyword: '',
			}
		},
		methods: {
			updateStatus(status) {
				this.$emit('updateStatus', status) //emit前一定要加上$
			},
			updateKeyword() {
				this.$emit('updateKeyword', this.keyword) //emit前一定要加上$
			}
		},
	}
</script>

<style>
	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px;
		font-size: 15px;
	}

	.todo-count {
		flex: 1;
		text-align: left;
	}
</style>